<template>
  <div class="pageRoll">
    <div class="shopMsg">
      <img :src="exImg" alt="" style="width:375px;height:667px" />
      <div class="shopMsg__right">
        <div style="margin-top:18px">
          <RichEditor :text="detailText" ref="wEditor"></RichEditor>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import RichEditor from "@/components/RichEditor.vue";

import exImg from "@/assets/images/ex_img.png";

/**
 * 编辑商品信息
 */
@Component({
  components: {
    RichEditor,
  },
})
export default class CodeGoodSellInfo extends Vue {
  get formModel() {
    return this.$parent.formModel;
  }

  @Watch("formModel")
  modelChange(nVal) {
    if (nVal) {
      this.detailText = nVal.detail;
    }
  }

  sellModel = this.formModel;

  exImg: string = exImg;

  /** 商品详情 */
  detailText = "";

  @Watch("detailText")
  detailEdit() {
    console.log(this.detailText);
  }

  getDetailHtml() {
    return (this.$refs.wEditor as any).getHtml();
  }

  mounted() {
    this.setFormModel();
  }

  setFormModel() {
    const goodDetail = this.sellModel;
    if (goodDetail) {
      this.detailText = goodDetail.detail;
    }
  }

  async getFormModel() {
    return {
      /** 商品详情 */
      detail: this.getDetailHtml(),
    };
  }
}
</script>

<style lang="scss" scoped>
.shopMsg {
  display: flex;
  padding-top: 40px;
  margin-left: 20px;
  &__right {
    margin-left: 20px;
    &--wed {
      display: flex;
      align-items: center;
      margin-top: 40px;
      height: 40px;
      &--text {
        margin-top: 10px;
        margin-right: 20px;
      }
    }
  }
}
</style>
